<template>
<!--  算法部-->
  <section class="bg-2 pt-120 pb-120" ref="testref">
    <div class="container">
      <div class="row">
        <div class="col-lg-7 col-sm-7">
          <!-- user interact image -->
          <div class="user-interact-image">
            <img :src="department.img" alt="">
          </div>
          <!-- End of user interact image -->
        </div>
        <div class="col-lg-5 col-sm-5">
          <!-- user ineract text -->
          <div class="contentheight user-interact-inner"
               :class="{ boxtranslateY: true, testenter: testShow }"
               id="test">
            <div class="interact-icon">
              <img src="/assets/img/icons/teamwork.svg" class="svg" alt="">
            </div>
            <h2>{{department.department}}</h2>
            <transition>
                <p v-if="testShow" >
                  {{ department.introduce }}
                </p>
            </transition>
            <a href="#join" class="btn">加入我们</a>
          </div>
          <!--End of user ineract text -->
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import {Api} from "~/request/Api"
export default {
  name: "ServiceOne",
  data() {
    return {
      current: 1,
      currentScroll: 0,
      testShow: false,
      department: {}
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScrollbox, true);
    //请求页面静态数据
    this.getDepartment();
  },
  methods: {

    handleScrollbox() {
      //浏览器适配
      this.currentScroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;//表示当前滚动的位置
      // console.log(this.currentScroll,"dd")
      if (this.currentScroll >2400) {
        //当前滚动位置到达testref的时候
        this.testShow = true
      }
    },

    async getDepartment() {
      const Department = await Api.getServiceOne();
      console.log(Department,123)
      this.department = {...Department.data.DepartmentInfo.Depart[0]};
      console.log("department",this.department);
    }
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScrollbox, true)
  },
}
</script>

<style scoped>
@keyframes antMoveLeftIn {
  0% {
    transform: translateX(150px)
  }
  100% {
    transform: translateX(0px)
  }
}

.v-leave-active {
  animation: antMoveLeftIn 1s;
}

.v-enter-active {
  animation: antMoveLeftIn 1s;
}
</style>
